<template>
    <div id="activityList">
        <div class="header-box">
            <div class="category-box"><span>首页 </span>&gt; 奖品列表</div>
        </div>
		<div class="tool-box">
            <!--<ul>
                <li v-for="(item, index) in listTypeData" 
                    :class="{'active': index===currentListType}"
                    @click="chooseListType(index)">{{item}}</li>
            </ul>-->
            <el-input placeholder="按奖品名称进行搜索" v-model="searchInput">
                <el-button slot="append" @click="getPrizeList"><i class="fa fa-search" aria-hidden="true" ></i></el-button>
            </el-input>
        </div>
        <div v-loading="loadingChoose" element-loading-text="拼命加载中">
            <table>
                <thead>
                    <tr>
                        <td class="operate">奖品名称</td>
                        <td class="operate condition-td">奖品类型
                        <!--<i class="fa fa-angle-down" aria-hidden="true"></i>
                            <div class="td-condition-box">
                                <p v-for="(item, index) in typeFilter"
                                :class="{'blueColor': index===currentListTypeFilter}"
                                @click="chooseType(item, index)">{{item.type}}</p>
                            </div>-->
                        </td>
                        <td>有效期</td>
                        <td>奖品来源</td>
                        <td class="operate condition-td">状态
                            <!--<i class="fa fa-angle-down" aria-hidden="true"></i>
                            <div class="td-condition-box">
                                <p v-for="(item, index) in conditionFilter"
                                :class="{'blueColor': index===currentListCondition}"
                                @click="chooseConditon(item, index)">{{item.type}}</p>
                            </div>-->
                        </td>
                        <td>库存</td>
                        <td>被抽中</td>
                        <td>被锁定</td>
                        <td>当前可用库存</td>
                        <td >操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in dataList">
                        <td>{{item.name}}</td>
                        <td>{{item.typeName?item.typeName:'微信红包'}}</td>
                        <td>{{item.expiredStart}}<br>{{item.expiredEnd}}</td>
                        <td>{{item.resource}}</td>
                        <td :class="{'greenColor':new Date(item.expiredEnd)>new Date()}">{{item | validityFliter}}</td>
                        <td>{{item.stockNumber}}</td>
                        <td>{{item.recordNumber}}</td>
                        <td>{{item.lockNumber}}</td>
                        <td>{{item.availableNumber}}</td>
                        <td class="operate-td">
                            <span class="more-td-btn">更多<i class="fa fa-angle-down" aria-hidden="true"></i>
                                <div class="td-more-box">
                                    <p @click="toEditPrize(item)" v-show="item.typeCode!='redpack'">编辑</p>
                                    <p @click="deleteItem(item)">删除</p>
                                    <p v-show="item.typeCode=='coupon'" @click="openCodeShow(item)">导入券码</p>
                                    <p v-show="item.typeCode=='entity'" @click="warehouseClick(1,item)">入库</p>
                                    <p v-show="item.typeCode=='entity'" @click="warehouseClick(2,item)">出库</p>
                                </div>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="add-prize-footer text-center"  v-show="dataList.length!=0">
                <el-pagination
                    small
                    layout="prev, pager, next"
                    :total="total"
                    @current-change="pageChange"
                    >
                </el-pagination>
            </div>
            <div class="no-data" v-show="dataList.length===0">您还没有创建应用内活动？<span @click="toCreateActivity">去创建一个</span></div>
        </div>
        <!--实物出库入库-->
        <el-dialog
            :title="warehouse.title"
            :visible.sync="warehouseShow"
            size="tiny">
            <el-input placeholder="请输入数量" v-model="warehouse.number">
                <template slot="prepend">{{warehouse.textInfo}}</template>
            </el-input>
            <div>一次性最多{{warehouse.title}}{{warehouse.stockNumber}}个</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="warehouseShow = false">取 消</el-button>
                <el-button type="primary" @click="warehouseSub(warehouse)">确 定</el-button>
            </span>
        </el-dialog>

        <!--导入券码-->
        <el-dialog
            title="导入券码"
            :visible.sync="ImportCodeShow"
            size="tiny"
            :show-close="!ImportCodeShow"
            :close-on-click-modal="!ImportCodeShow"
             >
             <div v-loading="ImportCodeLoading">
                 <div class="push-text">每次最多可导入1000个劵码</div>
                <div class="push-text">码劵不能有中文和英文逗号</div>
                <el-input class="element-input" disabled placeholder="请导入券码" v-model="couponCode">
                    <label id="file" slot="append" class="file-label cursor">
                        <input type="file" name="file" @change='addCouponCode' ref="couponFile" class="up-file-input"/> 
                        <el-button >选择券码</el-button>
                    </label> 
                </el-input>
                <a href="./../../static/lib/file/voucher-code-example.csv" class="down-coupon-code">下载券码模板</a>
                <div class="dialog-footer text-right">
                    <el-button @click="ImportCodeShow = false">取 消</el-button>
                    <el-button type="primary" @click="ImportCodeSub">导入</el-button>
                </div>
             </div>
            
        </el-dialog>
        
    </div>
</template>

<script>
    import * as api from './../api/api'
    export default {
    	data(){
    		return {
                currentListType: 0,
                // listTypeData: ['自建奖品', '平台奖品'],
                dataList: [],
                actConditionCode: {
                    '1': '进行中',
                    '2': '未开始',
                    '3': '已暂停',
                    '4': '已结束'
                },
                currentListCondition: 0,
                conditionFilter: [
                    {
                        type: '全部',
                        value: ''
                    },{
                        type: '进行中',
                        value: '1'
                    },{
                        type: '未开始',
                        value: '2'
                    },{
                        type: '已暂停',
                        value: '3'
                    },{
                        type: '已结束',
                        value: '4'
                    }
                ],
                currentListTypeFilter: 0,
                typeFilter: [
                    {
                        type: '全部',
                        value: ''
                    },{
                        type: '口令',
                        value: '1'
                    },{
                        type: '全民捉鬼',
                        value: '2'
                    },{
                        type: '幸运彩蛋',
                        value: '3'
                    },{
                        type: '问卷调查',
                        value: '4'
                    },{
                        type: '全民打飞机',
                        value: '5'
                    },{
                        type: '九宫格',
                        value: '6'
                    },{
                        type: '刮刮乐',
                        value: '7'
                    },{
                        type: '大转盘',
                        value: '8'
                    },{
                        type: '剥粽子',
                        value: '9'
                    }
                ],
                loadingChoose:false,  //加载中
                searchInput:'', //搜索
                current_page:1, //当前页码
                last_page:'',//最后一页
                limit:10, //一页显示多少条
                total:0, //总条数

                warehouseShow:false,    
                warehouse:{
                    title:'入库',
                    number:'',
                    textInfo:'入库数量',
                    prize_id:'',
                    stockNumber:0, //库存
                },
                //导入券码
                ImportCodeLoading:false,
                ImportCodeShow:false,
                couponCode:'',   //显示的券码文件
                uploadInput:'',  
                ImportPrizeId:'',
    		}
    	},
        watch: {
            
        },
    	components: {
    		
    	},
    	mounted(){
            this.getPrizeList();
    	},
        computed: {
            
        },
    	methods: {
            getPrizeList(){
                let vm = this;
                vm.loadingChoose=true;
                let body={
                    name:vm.searchInput,
                    resource:'',
                    limit:vm.limit,
                };
                if(vm.current_page==1){
                    body.offset=(parseInt(vm.current_page)-1)*parseInt(vm.limit);
                }else{
                    body.offset=parseInt(vm.current_page)*parseInt(vm.limit);
                }
                
                api.prizeList(body).then(res => {
                    vm.loadingChoose=false;
                    if (res.status == 200) {
                        vm.dataList = res.data.data.prizes;
                        vm.total=res.data.data.paginate.total;
                    };
                }).catch(function (err) {
					vm.loadingChoose=false;
                    vm.httpStatusCode(err);
				});
            },
            chooseListType(index){
                this.currentListType = index;
            },
            toCreateActivity(){
                this.$router.push('chooseTemplate');
            },
            chooseConditon(item, index){
                this.currentListCondition = index;
            },
            chooseType(item, index){
                this.currentListTypeFilter = index;
            },
            //点击当前的页数
            pageChange(a){
                this.current_page=a;
                this.getPrizeList();
            },
            //删除
            deleteItem(item) {
                let vm = this;
                this.$alert('确定删除'+item.name, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showCancelButton:true,
                    callback: action => { 
                        if(action=='confirm'){
                           let body={
                                prize_id:item.id
                            };
                            api.deletePrize(body).then(res=>{
                                if(res.data.code==200){
                                    vm.getPrizeList();
                                    vm.$message({
                                        message: '删除成功',
                                        type: 'success'
                                    });
                                }
                            }); 
                        } 
                    }
                });
            },
            //编辑奖品
            toEditPrize(item){
                this.$router.push({name:'editPrize',query:{'prizeId':item.id}});
            },
            //出库入库
            warehouseClick(val,item){
                this.warehouseShow=true;
                if(val==1){
                    this.warehouse={
                        title:'入库',
                        type:'1',
                        number:'',
                        textInfo:'入库数量',
                        prize_id:item.id,
                        stockNumber:item.stockNumber, //库存
                    }
                }else{
                    this.warehouse={
                        title:'出库',
                        type:'2',
                        number:'',
                        textInfo:'出库数量',
                        prize_id:item.id,
                        stockNumber:item.stockNumber, //库存
                    }    
                }   
            },
            //确认出库入库
            warehouseSub(item){
                let vm = this;
                let num = /^\+?[1-9][0-9]*$/;　
                let body={
                    prize_id:item.prize_id,
                    number:item.number
                }; 
                if(num.test(item.number)&&item.number>=0&&item.number<vm.warehouse.stockNumber){
                    if(item.type==1){
                        api.entityEntry(body).then(res=>{
                            vm.warehouseShow=false;
                            if(res.data.code==0){
                                vm.getPrizeList();
                                vm.$message({
                                    message: '入库成功',
                                    type: 'success'
                                });
                            }
                        });
                    }else if(item.type==2){
                        api.entityDelivery(body).then(res=>{
                            vm.warehouseShow=false;
                            if(res.data.code==0){
                                vm.getPrizeList();
                                vm.$message({
                                    message: '出库成功',
                                    type: 'success'
                                });
                            }
                        });
                    }
                }else{
                    vm.$message({
                        message: `库存不能大于${vm.warehouse.stockNumber},且大于0`
                    });
                }   
            },
            //打开导入券码
            openCodeShow(item){
                this.ImportPrizeId=item.id;
                this.ImportCodeShow = true;
            },
            //选择本地券码
            addCouponCode(e){
                let vm = this;
                let ext=e.target.value.toLowerCase().split('.').splice(-1);
                vm.couponCode=e.target.files[0].name;	
                vm.uploadInput=e.target.files[0];
                event.target.value=''; 
            },
            //确认导入
            ImportCodeSub(){
                let vm = this;  
                if(vm.uploadInput){
                    vm.ImportCodeLoading=true;
                    let form = new FormData();  
                    form.append('codes', vm.uploadInput);
                    form.append('prize_id', this.ImportPrizeId);
                    api.importVoucherCode(form).then(res=>{
                        this.ImportCodeLoading=false;
                        this.ImportCodeShow=false;  
                        if(res.data.code==200){
                            vm.$message({ message: '上传成功', type: 'success' });
                        }else{
                            vm.$message({ message: res.data.message });
                        }
                        vm.couponCode='';
                        vm.uploadInput='';
                    });	
                }else{
                    vm.$message({ message: '请选择券码'});  
                }  
            },
    	}
    }
</script>
<style>
    #activityList .tool-box .el-input-group--append{
        width:237px;
    }
</style>
<style lang="less" scoped>
    #activityList{
        background-color: #f4f8fb;
        width:100%;
        min-height: 100%;
        padding:20px 40px;
        box-sizing: border-box;
    }
    .header-box{
        height: 30px;
    }
    .category-box{
        color:#666666;
        font-size: 14px;
        float:left;
        padding-right:104px;
        border-right: 1px solid #e8e8e8;
    }
    .category-box span{
        color:#1b2b38;
    }
    .tool-box{
        // padding-left:330px;
        padding-top:20px;
        padding-bottom:10px;
        position: relative;
    }
    .tool-box ul{
        width: 282px;
        height: 47px;
        position: absolute;
        left:0;
        bottom:0;
    }
    .tool-box ul li{
        float:left;
        width: 50%;
        height: 100%;
        line-height: 47px;
        text-align: center;
        color: #888;
        border-radius: 4px 4px 0 0;
        font-size: 14px;
    }
    .tool-box ul li:not(.active){
        cursor: pointer;
    }
    .tool-box ul .active{
        color: #333;
        background-color: #f1f1f1;
    }
    .tool-box .btn{
        float:right;
        width: 90px;
        padding: 0;
        border-radius: 13px;
        background-color: #ec5463;
        color: #fff;
        font-size: 12px;
        border: 0;
        height: 26px;
        line-height: 26px;
        cursor: pointer;
        font-weight: 400;
        text-align: center;
        margin-top: 5px;
    }
    #activityList table{
        width:100%;
        border-collapse:collapse;
    }
    #activityList table thead {
        width: 100%;
        height: 50px;
        color: #333;
        background-color: #f1f1f1;
    }
    #activityList table thead tr>td{
        height: 50px;
        text-align: center;
        font-size: 12px;
    }
    #activityList table thead tr>td>i{
        margin-left: 4px;
    }
    .operate{
        cursor:pointer;
    }
    #activityList table>tbody>tr{
        border-bottom: 1px solid #efefef;
        background: #ffffff;
        height: 60px;
    }
    #activityList table>tbody>tr:hover{
        background: #effdfc;
    }
    #activityList table>tbody>tr:hover>td:first-child{
        border-color:#20a0ff;
    }
    #activityList table>tbody>tr>td:first-child{
        border-left: 3px solid #ffffff;
        box-sizing: border-box;
    }
    #activityList table>tbody>tr>td{
        font-size: 12px;
        color:#888888;
        text-align: center;
    }
    .operate-td{
        color:#2db7f5!important;
    }
    .operate-td span i{
        margin-left: 3px;
    }
    .operate-td span:nth-child(2),
    .operate-td span:nth-child(4){
        position: relative;
        top:-2px;
    }
    .operate-td span:nth-child(1),
    .operate-td span:nth-child(3),
    .operate-td span:nth-child(5){
        padding:0 5px;
        cursor: pointer;
    }
    .operate-td span:nth-child(1):hover,
    .operate-td span:nth-child(3):hover,
    .operate-td span:nth-child(5):hover{
        text-decoration: underline;
    }
    .td-more-box{
        width: 70px;
        box-shadow: 2px 2px 10px rgba(0,0,0,.3);
        background: #ffffff;
        padding:5px 0;
        position: absolute;
        left:-30%;
        // bottom:-71px;
        display: none;
        z-index: 2;
    }
    .condition-td{
        width:8%;
        position:relative;
    }
    .td-condition-box{
        width: 70px;
        box-shadow: 2px 2px 10px rgba(0,0,0,.3);
        background: #ffffff;
        padding:5px 0;
        position: absolute;
        left:0;
        right:0;
        margin: auto;
        top:40px;
        z-index: 2;
        max-height: 190px;
        overflow-y: auto;
        display: none;
    }
    .condition-td:hover .td-condition-box{
        display: block;
    }
    .td-more-box p,.td-condition-box p{
        color: #888888;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
    }
    .td-more-box p:hover,.td-condition-box p:hover{
        text-decoration: underline;
        color: #2db7f5;
    }
    .td-condition-box .blueColor{
        color: #2db7f5;
    }
    .more-td-btn{
        position: relative;
    }
    .more-td-btn:hover .td-more-box{
        display: block;
    }
    .add-prize-footer{
        width:100%;
        height: 87px;
        box-sizing: border-box;
        padding: 30px;
        background: #ffffff;
    }

    .greenColor{
        color: #a1d568!important;
    }
    .no-data{
        padding: 30px 0;
        background-color: #fff;
        text-align: center;
        color: #888;
        font-size: 14px;
        width:100%;
    }
    .no-data span{
        color: #ec5463;
        cursor: pointer;
    }
    .no-data span:hover{
        text-decoration: underline;
    }

    .element-input{
        margin:10px 0; 
    }
    .file-label{
        display: inline-block;
        // height:30px;
        // width:88px;
        padding: 10px 0;
        position: relative;
    }
    .up-file-input{
        cursor: pointer;
        display: block;
        opacity: 0;
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
    .push-text{
        color:#FB404B;
    }
    .down-coupon-code{
        color: #fff;
        background-color: #20a0ff;
        border-color: #20a0ff;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        margin: 0;
        padding: 10px 15px;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box;
    }
    .down-coupon-code:hover{
        background-color: #4DB3FF;
    }
</style>
